<template>
  <!-- 首页左边菜单 -->
  <el-menu :default-active="activeName">
    <el-menu-item
      v-for="item in menus"
      :index="item.name"
      :key="item.name"
      @click="menuItemClickHandler(item)">
      <i :class="item.icon"></i>
      <span slot="title">{{ item.name }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import {HOME_MENUS} from "@/store/const/const-home";

export default {
  name: "HomeLeft",
  data() {
    return {
      // 菜单数据
      menus: HOME_MENUS,
      // 当前激活项的名称，默认为首页
      activeName: HOME_MENUS[0].name
    }
  },
  mounted() {
    /**
     * 监听全局事件，该事件由路由守卫发起，激活当前菜单项
     */
    this.$bus.$on("global.routerChanged", fullPath => {
      const menuItem = this.menus.find(item => item.path === fullPath);
      // console.log('global.routerChanged', menuItem);
      if (menuItem) {
        // 发送全局事件，通知工作区Tabs增加多一个Tab页
        this.$bus.$emit("home.menuItemClick", menuItem);
        // 左边菜单激活为当前路由对应的菜单
        if (menuItem.name !== this.activeName) {
          this.activeName = menuItem.name;
        }
      }
    });
  },
  methods: {
    /**
     * 左边菜单项点击事件处理：在工作区跳转到相应的页面，同时在工作区Tabs上显示对应的Tab页
     *
     * @param item
     */
    menuItemClickHandler(item) {
      // 激活当前菜单
      this.activeName = item.name;
      // 如果当前菜单已经是激活状态，则不作处理
      if (this.$route.path.indexOf(item.path) !== -1) {
        return;
      }
      // 工作区页面路由跳转
      this.$router.replace(item.path);
    }
  }
}
</script>

<style scoped>
.el-menu {
  border-right-width: 0;
}
</style>
